<template>
  <div style="height:100%" class="multicolumn">
    <div class="container">
    <div class="left-container">
    <el-card shadow="never" :body-style="contentViewHeight">
        <!-- 车辆分组 -->
        <el-tree class="tree-wrapper" :data="groupList" :props="defaultProps" :expand-on-click-node="false" node-key="id"
          :default-expanded-keys="idArr" @node-click="refreshList1(page,$event)">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span style="width: 100px">{{ data.names }}</span>
          </span>
        </el-tree>
      </el-card>
    </div>
    <div class="right-container">
    <el-card shadow="never" :body-style="contentViewHeight">

      <div >
        <el-form ref="form" :model="queryForm" label-width="69px" :inline="true" class="queryForm">
          <el-form-item label="关键字:">
            <el-input v-model="queryForm.truckNumber" size="small" placeholder="请输入车牌号查询"></el-input>
          </el-form-item>
          <el-form-item label="车辆类型:" label-width="80px">
            <el-select clearable size="small" v-model="queryForm.truckType" placeholder="车辆类型">
              <el-option v-for="item in  this.$dictUtils.getDictList('truckType')" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="车辆特征:" label-width="82px" style="margin-left: 40px">
            <el-checkbox v-model="queryForm.noPrefix" label="无牌">无车牌</el-checkbox>
            <el-checkbox v-model="queryForm.isBlacklist" label="1">黑名单</el-checkbox>
            <el-checkbox v-model="queryForm.noTransport" label="1">半年内未运输车辆</el-checkbox>
          </el-form-item>
          <el-form-item>
            <div class="but-container">
              <el-button class="search-btn" type="default" style="margin-right:5px" size="small" @click="refreshList(page,orderBy.name,orderBy.method)">查询</el-button>
              <el-button size="small" @click="reset">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <section style="margin-top: -6px">
        <el-button style="margin-left: 0px;margin-right:5px" v-if="hasPermission('truck:truck:add')" type="primary" size="small"
          @click="add">新增</el-button>
        <section class="right-but" style="display:flex">
          <el-button type="text" style="margin-right:-13px" @click="refreshList(page,orderBy.name,orderBy.method)">
            <img style="width:44px;height:36px;" src="~@/assets/img/shuaxin.png">
          </el-button>
          <PopoverBut class="selectBut" ref="popoverBut" :checkedProps="checkedProps" :options="options" @getCheckeds="handlerCloumn"></PopoverBut>
        </section>
      </section>

    <el-table size="mini" v-loading="loading" :data="tableData" style="width: 100%; margin-top: 10px" border
      :header-cell-style="{
        'background-color': '#eeeeee !important',
      }" :row-class-name="tableRowClassName"
              class="adjustAppendTable"
      @sort-change="sortthiscolumn">
        <el-table-column type="expand" width="30px">
            <template slot-scope="scope">
                <el-form class="append-form" ref="form" :model="scope.row">
                    <el-row class="row-more">
                        <el-form-item class="content-more" label="重量:">
                            <p><span>固定皮重：{{scope.row.tareWeight | noValue}}</span><span>标准载重：{{scope.row.standardLoad | noValue}}</span></p>
                        </el-form-item>
                        <el-form-item class="content-more" label="最近称重:">
                            <p><span>皮重：{{scope.row.lastTareWeight | noValue}}</span><span>毛重：{{scope.row.lastGrossWeight | noValue}}</span></p>
                        </el-form-item>
                    </el-row>
                    <el-row class="row-more">
                        <el-form-item class="content-more" label="信用分:">
                            <p>{{scope.row.creditScore | noValue}}</p>
                        </el-form-item>
                        <el-form-item class="content-more" label="道路运输许可证:">
                            <p>{{scope.row.transportPermitNumber | noValue}}</p>
                        </el-form-item>
                    </el-row>
                    <el-row class="row-more">
                        <el-form-item label="行车证编号:">{{scope.row.vehicleLicenseNumber |noValue}}</el-form-item>
                        <el-form-item label="最近运输时间:">{{scope.row.lastTransportTime | noValue}}</el-form-item>
                    </el-row>
                    <el-row class="row-more">
                        <el-form-item label="创建人:">{{scope.row.createBy.loginName | noValue}}</el-form-item>
                        <el-form-item label="创建时间:">{{scope.row.createDate | noValue}}</el-form-item>
                    </el-row>
                    <el-row class="row-more">
                        <el-form-item label="上次操作人:">{{scope.row.updateBy.loginName | noValue}}</el-form-item>
                        <el-form-item label="上次操作时间:">{{scope.row.updateDate | noValue}}</el-form-item>
                    </el-row>
                </el-form>
            </template>
        </el-table-column>
      <el-table-column type="index" label="序号" width="40" align="center">
        <template slot-scope="scope">
          <span>{{
            (page.pageNo - 1) * page.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="truckNumber" label="车牌号" width="150px" sortable="truck_number">
      </el-table-column>
      <el-table-column prop="axle.axle" label="车轴类型" width="130px"  sortable="axle.axle">
      </el-table-column>

      <el-table-column prop="driverName" min-width="110px" label="常用司机">
        <template slot-scope="scope">
          <section>
            <el-link type="primary" :underline="false" v-if="hasPermission('truck:truck:edit')" @click="handleCommand({method:'driver', row:scope.row})">{{scope.row.driverName}}
            </el-link>
          </section>
        </template>
      </el-table-column>
        <el-table-column prop="driverPhone" label="司机电话" width="150px">
      </el-table-column>
      <el-table-column prop="driverIdcard" label="司机身份证" width="150px">
      </el-table-column>
      <el-table-column prop="truckType" label="车辆类型" width="150px">
        <template slot-scope="scope">
          <section class="empty">
            {{$dictUtils.getDictLabel("truckType", scope.row.truckType, "")}}
          </section>
        </template>
      </el-table-column>
      <el-table-column prop="isBlacklist" label="黑名单" width="100">
        <template slot-scope="scope">
          <section v-if="scope.row.isBlacklist==='1'">
             是
          </section>
          <section v-else>
            否
          </section>
        </template>
      </el-table-column>
<!--      <el-table-column prop="groupName" min-width="120px" label="车辆分组">-->
<!--      </el-table-column>-->
      <el-table-column prop="state" label="状态" width="110px">
        <!-- <template slot-scope="scope">
            <span>{{$dictUtils.getDictLabel("state", scope.row.state, "")}}</span>
          </template> -->
        <template slot-scope="scope">
          <section class="state normal" v-if="scope.row.state===1">
            <span></span>{{$dictUtils.getDictLabel("state", scope.row.state, "")}}
          </section>
          <section class="state empty" v-else>
            <span></span>{{$dictUtils.getDictLabel("state", scope.row.state, "")}}
          </section>
        </template>
      </el-table-column>
      <span v-for="(item,index) in checkedProps" :key="index">
        <el-table-column prop="creditScore" :label="item" width="130px" v-if="item==='信用分'"sortable="creditScore">
        </el-table-column>
        <el-table-column prop="transportPermitNumber" width="190px" :label="item" v-if="item==='道路运输许可证'">
        </el-table-column>
        <el-table-column prop="vehicleLicenseNumber" :label="item" width="130px" v-if="item==='行车证编号'"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="lastTransportTime" :label="item" v-if="item==='最近运输时间'" width="160px"sortable="lastTransportTime">
        </el-table-column>

      </span>
      <el-table-column prop="address" label="操作"  fixed="right" width="202">
        <template slot-scope="scope">
          <template v-for="item in $dictUtils.getDictList('state')">
            <el-link type="primary" v-if="item.value !=='-1'&&hasPermission('truck:truck:edit')&& item.value!==(scope.row.state+'')"
              :underline="false" @click="editState(item.value,scope.row)" :disabled="(scope.row.state===-1&& item.value==='0')||item.value==scope.row.state">{{item.label}}
            </el-link>
          </template>
          <el-link type="primary" :underline="false" v-if="hasPermission('truck:truck:edit')" @click="edit(scope.row)">修改
          </el-link>
          <!-- <el-link type="primary" :underline="false" v-if="hasPermission('truck:truck:del')" @click="del(scope.row.id)">删除
          </el-link> -->
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link" style="font-size:16px">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="hasPermission('truck:truck:del')" :command="{method:'del', row:scope.row}">删除</el-dropdown-item>
              <el-dropdown-item :command="{method:'isBlacklist', row:scope.row}" v-if="hasPermission('truck:truck:edit') && scope.row.isBlacklist==='0'">设为黑名单</el-dropdown-item>
              <el-dropdown-item :command="{method:'notBlacklist', row:scope.row}" v-if="hasPermission('truck:truck:edit') && scope.row.isBlacklist==='1'">取消黑名单</el-dropdown-item>
              <el-dropdown-item :command="{method:'driver', row:scope.row}">设置司机</el-dropdown-item>
              <!-- <el-dropdown-item :command="{method:'transCompany', row:scope.row}">设置承运商</el-dropdown-item> -->
              <el-dropdown-item :command="{method:'viewCredent', row:scope.row}">查看车辆证件</el-dropdown-item>
              <el-dropdown-item :command="{method:'viewEncoder', row:scope.row}">查看车辆二维码</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-size="page.pageSize" :current-page="page.pageNo"
      layout="total,sizes,prev, pager, next, jumper" :total="page.total">
    </el-pagination>

     </el-card>
    </div>
    </div>
    <TruckFrom ref="truckFrom" @refreshDataList="refreshList(page, '', '', '', '')"></TruckFrom>
    <TruckImage ref="truckImage" @refreshDataList="" style='width: 80px;'></TruckImage>
    <DriverList ref="driverList"></DriverList>
    <CompanyList ref="companyList"></CompanyList>
    <OwerFrom ref="owerFrom"></OwerFrom>
    <PlateDialog ref="plateDialog" @refreshDataList="getTruckNum" :showCheckNullNumber="true" :showDefault="true"></PlateDialog>
    <receivedReason flowTitle="黑名单原因" ref="receivedReason" @refreshDataList="refreshList(page, '', '', '', '')"></receivedReason>
  </div>
</template>
<script>
import PlateDialog from '@/components/plate/plate'
import TruckFrom from './truckFrom'
import TruckImage from './truckImage'
import PopoverBut from '@/components/button/popoverBut'
import DriverList from './driver/driverList'
import CompanyList from './company/companyList'
   import OwerFrom from './owerFrom'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import receivedReason from './receivedReason'
  const options1 = []
  export default {
    components: {
      PlateDialog,
      TruckFrom,
      PopoverBut,
      TruckImage,
      DriverList,
      CompanyList,
      Treeselect,
      OwerFrom,
      receivedReason
    },
    computed: {
      contentViewHeight() {
        let height = this.$store.state.common.documentClientHeight - 122
        return {
          minHeight: height + 'px'
        }
      }
    },

    data() {
      return {
        checkedProps: options1,
        ShowCloum: {
          createDate: ''
        },
        options: [{
            label: '信用分',
            key: 'creditScore'
        },
            {
                label: '行车证编号',
                key: 'vehicleLicenseNumber'
            }, {
                label: '道路运输许可证',
                key: 'transportPermitNumber'
            }, {
                label: '最近运输时间',
                key: 'lastTransportTime'
            },
          {
            label: '创建人',
            key: 'createBy.loginName'
          }, {
            label: '创建时间',
            key: 'createDate'
          }, {
            label: '上次操作人',
            key: 'updateBy.loginName'
          }, {
            label: '上次操作时间',
            key: 'updateDate'
          }
        ],
        queryForm: {
          truckNumber: '',
          isBlacklist: '',
          truckType: '',
          truckGroup: null,
          noPrefix: '',
          noTransport: ''
        },
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 0
        },
        tableData: [{
          truckNumber: '11'
        }],
        orderBy: {
          name: '',
          method: ''
        },
        groupList: [], //车辆分组
        defaultProps: {
          // 修改el-tree默认data数组参数
          label: 'name',
          id: 'id',
          parentId: 'parentId',
          children: 'children'
        },
        idArr: [],
        loading: false
      }
    },
    activated() {
      this.getGroupFun();
    },
    methods: {
      // 获取分组
      getGroupFun() {
        this.loading = true
        this.$http({
          url: '/truck/truckGroup/treeData',
          method: 'get',
          params:{
            'state':1
          }
        }).then((res) => {
          if ((res.data.code = "200")) {
            if (res.data.result.length === 0) {
              this.groupList = [];
              return;
            }
          }
          this.groupList = res.data.result
          this.groupList.forEach(m => {
            this.idArr.push(m.id)
          })
          // console.log(this.groupList)
          this.loading = false
        });
      },
      // 获取数据列表
      refreshList(params, orderName, orderByAORC, queryForm) {
        this.loading = true
        this.$http({
          url: '/truck/truck/list',
          method: 'get',
          params: {
            'pageNo': params.pageNo,
            'pageSize': params.pageSize,
            'truckNumber': this.queryForm.truckNumber,
            'isBlacklist': Number(this.queryForm.isBlacklist),
            'truckType': Number(this.queryForm.truckType),
            'noPrefix': this.queryForm.noPrefix,
            'noTransport': this.queryForm.noTransport,
            'orderBy': orderName,
            'orderByAORC': orderByAORC
          }
        }).then(({
          data
        }) => {
          if (data.code === '200') {
            this.tableData = data.result.list
              this.tableData.forEach(item => {
                  if (!item.createBy) {
                      item.createBy = {
                          loginName: ''
                      }
                  }
                  if (!item.updateBy) {
                      item.updateBy = {
                          loginName: ''
                      }
                  }
              })
            this.page.total = data.result.count
            this.loading = false
          }
        })
      },
        getTruckNum (val) {
          const truck = val.join('')
            this.$store.commit('truck/setTruckNumber', truck)
        },
      refreshList1(params, $event) {
        this.queryForm.truckGroup = $event.id
        this.loading = true
        this.$http({
          url: '/truck/truck/list',
          method: 'get',
          params: {
            'pageNo': params.pageNo,
            'pageSize': params.pageSize,
            'truckGroup': $event.id
          }
        }).then(({
          data
        }) => {
          if (data.code === '200') {
            this.tableData = data.result.list
            this.page.total = data.result.count
            this.loading = false
          }
        })
      },

      editState(event, row) {
        this.$confirm('您是否要' + this.$dictUtils.getDictLabel("state", event, "") + '?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          this.loading = true
          this.$http({
            url: '/truck/truck/modify-state',
            method: 'post',
            params: {
              'id': row.id,
              'state': event,
              'effectTimeStamp': row.effectTimeStamp
            }
          }).then(({
            data
          }) => {
            if (data && data.success) {
              this.$message.success(data.message)
              this.refreshList(this.page, '', '')
            }
            this.loading = false
          })
        })

      },
      edit(row) {
        this.$refs.truckFrom.init('edit', row)
      },
      add() {
        this.$refs.truckFrom.init('add')
      },
      queryEncoder(id, truckNumber) {
        this.$refs.truckImage.init('viewEncoder', id, truckNumber)
      },
      queryCredent(id) {
        this.$refs.truckImage.init('viewCredent', id, '')
      },
      handleCommand(command) {
        if (command.method === 'viewCredent') {
          this.queryCredent(command.row.id)
        } else if (command.method === 'viewEncoder') {
          this.queryEncoder(command.row.id, command.row.truckNumber)
        } else if (command.method === 'driver') {
          this.$refs.driverList.init('list', command.row)
        } else if (command.method === 'transCompany') {
          this.$refs.companyList.init('list', command.row)
        } else if (command.method === 'isBlacklist') {
          this.blacklist(command.row.id,"1")
        } else if (command.method === 'notBlacklist') {
          this.notBlacklist(command.row.id,"0")
        } else if (command.method === 'del') {
          this.del(command.row.id)
        } else if (command.method === 'ower') {
          this.$refs.owerFrom.init('view', command.row)
        }
      },
      blacklist(id,blacklist) {
        var message = '';
        if(blacklist === '1'){
          message = '设为黑名单后，该车辆可能无法运输本厂货物，确定将该车设置为黑名单吗？'
        }else{
          message = '取消黑名单后，该车辆可以运输本厂货物，确定将该车取消黑名单吗？'
        }
        this.$confirm(message, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          this.$refs.receivedReason.init('edit', id,blacklist)
        })
      },
      notBlacklist(id,blacklist) {
        this.$confirm('取消黑名单后，该车辆可以运输本厂货物，确定将该车取消黑名单吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          this.loading = true
          this.$http({
            url: '/truck/truck/modify-blacklist',
            method: 'post',
            params: {
              'id': id,
              'isBlacklist': blacklist
            }
          }).then(({
            data
          }) => {
            if (data && data.success) {
              this.$message.success(data.message)
              this.refreshList(this.page, '', '')
            }
            this.loading = false
          })
        })
      },
      del(id) {
        let ids = id || this.dataListSelections.map(item => {
          return item.id
        }).join(',')
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          this.loading = true
          this.$http({
            url: '/truck/truck/delete',
            method: 'delete',
            params: {
              'ids': ids
            }
          }).then(({
            data
          }) => {
            if (data && data.success) {
              this.$message.success(data.message)
              this.refreshList(this.page, '', '')
            }
            this.loading = false
          })
        })
      },
      // 排序
      sortthiscolumn(a) {
        // console.log(a)
        this.orderBy.name = a.prop
        this.page.pageNo = 1
        if (a.order === 'ascending') {
          this.orderBy.method = 'asc'
        } else {
          this.orderBy.method = 'desc'
        }
        this.refreshList(this.page, this.orderBy.name, this.orderBy.method)
      },
      // 重置查询条件
      reset() {
        this.queryForm = {
          truckNumber: '',
          isOverload: '',
          isBlacklist: '',
          truckType: '',
          noTransport: '',
          noPrefix: ''
        }
      },
      // 是否显示某列数据
      handlerCloumn(e) {
        this.checkedProps = e
      },
      handleSizeChange(e){
        this.page.pageSize = e
        this.refreshList(this.page, 'update_date', 'desc')
      },
      handleCurrentChange(e) {
        this.page.pageNo = e
        this.refreshList(this.page, 'update_date', 'desc')
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex % 2 === 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
      },
      normalizer(node) {
        return {
          id: node.id,
          label: node.names,
          children: node.children
        }
      },
      //递归删除空数组
      exec(array) {
        array.forEach(item => {
          if (item.children.length === 0) {
            delete item.children
          } else {
            this.exec(item.children)
          }
        })
      },
      queryTruckGroup() {
        //树形车辆分组
        this.$http({
          url: `/truck/truckGroup/treeData`,
          method: 'get'
        }).then(({
          data
        }) => {
          this.groupList = data.result
          this.exec(this.groupList)
        })
      },
      selectValue(val) {}

    },
    mounted() { // dom加载完以后执行的函数，比如第一次打开网页要请求表格数据可以在这个里面写函数
    this.getGroupFun();
      this.refreshList(this.page, '', '')
        this.$refs.popoverBut.disable = true
    }
  }
</script>
<style lang="scss" scoped>
    @import '@/assets/scss/config.scss';
.multicolumn{
    >.container{
        margin: 0;
    ::v-deep.el-card{
        border: none;
    }
        .left-container{
            padding-top: 0;
            ::v-deep.el-card{
                .el-card__body{
                    padding: 0;
                }
            }
        }
        .right-container{
            ::v-deep .el-form{
                .el-form-item__label,.el-form-item__content{
                    line-height: 32px;
                }
                .el-input,.el-input__inner{
                    height: 32px;
                }
            }
            ::v-deep .adjustAppendTable.el-table{
                .el-table__expanded-cell{
                    .append-form{
                        .el-form-item{
                            width: 45%;
                            span{
                                margin-right: 20px;
                            }
                        }
                        .el-form-item:first-child{
                            margin-right: 5%;
                        }
                    }

                }
            }
        }
    }
}


  .right-container .el-input {
    width: 260px;
    height: 32px;

    input {
      width: 260px;
      height: 32px;
      border: 1px solid #AAAAAA;
      border-radius: 4px;
      color: #333333;
    }

    input:hover, input:focus {
      border-color: #1890ff;
    }

    .el-input__inner::-webkit-input-placeholder {
      color: #999999;
    }
    .el-input__suffix-inner{
      .el-icon-search{
        line-height: 32px;
      }
    }
  }

  .queryForm {
    position: relative;
      ::v-deep .el-input--small .el-input__inner {
          height: 36px;
          line-height: 32px;
          width: 320px;
      }

    .but-container {
      top: 20px;
      margin-left: 40px;
    }
  }

  /*.el-table .success-row {*/
  /*  background: #f0f9eb;*/
  /*}*/

  /*::v-deep .el-table .warning-row {*/
  /*  background: #f7f7f7;*/
  /*}*/
</style>
